<template>
	<view class="play_zhe_box" :class="isColse ? 'play_zhe_colse' : ''" v-if="show" :style="{
      'padding-top': height + 'px',
    }">
		<image src="@/static/images/index.png" mode="" class="play_zhe_box_bgImg"></image>
		<view class="play_head" :style="{
			top: statusBarHeight + 'px',
		  }">
			<view class="play_head_left">
				<image src="@/static/images/icon_hxxq_zhankai.png" mode="" @click="colse" class="play_head_left_img"></image>
			</view>
			<view class="text" v-if="list[audioActiveIndex]">
				{{
          (list[audioActiveIndex] && list[audioActiveIndex].title) ||
          list[audioActiveIndex].name ||
          "播放器"
        }}
			</view>
			<!-- <view class="play_head_right">
				<image src="@/static/images/slices/icon_zhunfa.png" mode="" class="play_head_right_img"></image>
			</view> -->
		</view>
		<view class="play_cover" v-if="list[audioActiveIndex]">
			<image :src="list[audioActiveIndex].fengmian_file_url" mode="" class="play_cover_img"></image>
		</view>
		<!-- <view class="play_text" v-if="aa"> 01.这些人，都在努力的活着 </view> -->
		<view class="play_bar">
			<view class="bofang_text">
				{{ timesHms }}
			</view>
			<view class="tiao">
				<slider class="audio-slider" :disabled="sliderDisabled" :value="timesAll" :min="0" :max="durations"
					@change="sliderChange" activeColor="#31AF91" backgroundColor="rgba(235, 249, 245, 0.34)"
					block-color="#31AF91" block-size="18" />
			</view>
			<view class="bofang_text">
				{{ duration }}
			</view>
		</view>
		<view class="play_btn">
			<view class="btn_left" @click="prevPlay()">
				<image src="@/static/images/icon_hxxq_shangyige.png" mode="" class="btn_left_img"></image>
			</view>
			<view class="btn_center">
				<image src="@/static/images/icon_hxxq_zanting.png" mode="" v-if="isPlay" @click="onPlay(true)" class="btn_center_img"></image>
				<image src="@/static/images/icon_hxxq_bofang.png" mode="" v-else @click="onPlay(false)" class="btn_center_img"></image>
			</view>
			<view class="btn_right" @click="nextPlay()">
				<image src="@/static/images/icon_hxxq_xiayige.png" mode="" class="btn_right_img"></image>
			</view>
		</view>
		<view class="bofang_list" @click="onOpenAudioList">
			<image src="@/static/images/icon_hxxq_caid.png" mode="" class="bofang_list_img"></image>
			<text class="bofang_list_text">播放列表</text>
		</view>
		<view class="zhezhao" v-if="listShow" @click.stop="yincangModal">
			<view class="box_list" >
				
			<!-- <view class="box_list" @click.stop="listShow = true"> -->
				
				<view class="list_title"> 
					<view class="list_title_left">播放列表({{ list.length }})</view>
					<image src="@/static/images/icon_hxxq_zhankai.png" mode="" class="list_title_right" @click.stop="listShow = false"></image>
			    </view>
				<view class="list_item" v-for="(item, index) in list"
					:class="index == audioActiveIndex ? 'current' : ''" @click="handItem(item, index)">
					{{ item.title || item.name }}
				</view>
			</view>
		</view>
		<!-- <le-audio 
		    :activeIndex="audioActiveIndex" 
		    :audioData="audioList" 
		    :showAudioListIcon="showAudioListIcon"
			:showAudioSpeedIcon="showAudioSpeedIcon" 
			:autoplay="autoplay"
			:isPlay="isPlay"
			@onOpenAudioList="onOpenAudioList"
			@onAudioChange="onAudioChange"></le-audio> -->
		<view class="play_bottom">
			
		</view>
	</view>
</template>

<script>
	import {
		bofang_list,
		add_log,
		shouting_wancheng
	} from "@/common/api/play.js"; // 播放
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	const bgAudioManager = uni.getBackgroundAudioManager();
	export default {
		name:'player',
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				height: 0,
				statusBarHeight: 0,
				audioActiveIndex: 0, //播放默认索引
				audioList: [], //播放列表数据
				showAudioListIcon: true,
				showAudioSpeedIcon: false,
				autoplay: true,
				list: [],
				isPlay: false,
				// show:false,
				aa: false,
				info: {},
				listShow: false,
				isColse: false,
				schedule: 0,
				duration: "00:00",
				currentTime: "00:00",
				durations: 0,
				currentTimes: 0,
				sliderDisabled: false,
				f: 0,
				a: true,
				times: null,
				newCurrentTimes:0
			};
		},
		watch:{
			currentTimes:{
				handler(new1,old) {
					this.newCurrentTimes = new1;
					
					this.$forceUpdate();
				}
			}
		},
		computed: {
			...mapState(["state","timesAll","timesHms"]),
		},
		created() {
			// console.log("----------");
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			this.statusBarHeight = statusBarHeight.statusBarHeight;
		},
		mounted() {
			// console.log("进入进入进入进入");
			let that = this;
			//进入播放状态
			bgAudioManager.onCanplay(() => {
				this.durations = bgAudioManager.duration;
				this.duration = this.formatSeconds(bgAudioManager.duration);
				if (
					this.list[this.audioActiveIndex] &&
					this.list[this.audioActiveIndex].user_is_buy
				) {
					this.isPlay = true;
				} else {
					this.isPlay = true;
				}
				if (this.list[this.audioActiveIndex]) {
					add_log({
						type: this.info.type,
						id: this.list[this.audioActiveIndex].id,
					}).then((res) => {
						// console.log("ressssssttttttttttttttttttttttttttttt", res);
					});
				}

				// console.log("成功播放", this.list[this.audioActiveIndex]);
			});
			let times = function() {
				// console.log("tttttt");

				that.schedule =
					(bgAudioManager.currentTime / bgAudioManager.duration).toFixed(2) * 100;
				that.currentTime = that.formatSeconds(
					bgAudioManager.currentTime.toFixed(0)
				);
				that.currentTimes = bgAudioManager.currentTime.toFixed(0);
				that.durations = bgAudioManager.duration;
				that.duration = that.formatSeconds(bgAudioManager.duration);
				// console.log(
				// 	'durationsdurationsdurationsdurationsdurationsdurationsdurationsdurationsdurationsdurations',
				// 	that.durations);
				if (this.info.type == 2) {
					if (
						that.currentTimes >= 30 &&
						that.list[that.audioActiveIndex] &&
						that.list[that.audioActiveIndex].user_is_buy == 0
					) {
						// console.log("this.show,this.show", that.show);
						uni.$u.toast("行者权益不足试听结束");
						bgAudioManager.pause();
						that.isPlay = false;
					}
				}

				// this.isPlay = true;
			};
			let is = uni.getStorageSync("isPlay");
			if (this.times) {
				clearInterval(this.times);
			}
			//音频播放更新事件
			bgAudioManager.onTimeUpdate((e) => {
				// console.log('111111',this.time == 0);
				if (this.time == 0) {
					this.schedule =
						(bgAudioManager.currentTime / bgAudioManager.duration).toFixed(2) *
						100;
					this.currentTime = this.formatSeconds(
						bgAudioManager.currentTime.toFixed(0)
					);
					
					this.setTimeHms(this.formatSeconds(
						bgAudioManager.currentTime.toFixed(0)
					));
					this.currentTimes = bgAudioManager.currentTime.toFixed(0);
					this.setTimes(bgAudioManager.currentTime.toFixed(0));
					that.durations = bgAudioManager.duration;
					this.duration = this.formatSeconds(bgAudioManager.duration);
					this.$forceUpdate()
					if (
						this.currentTimes >= 30 &&
						this.list[this.audioActiveIndex] &&
						that.list[that.audioActiveIndex].user_is_buy == 0
					) {
						// console.log("this.show,this.show", this.show);
						uni.$u.toast("行者权益不足试听结束");
						bgAudioManager.pause();
						this.isPlay = false;
					}
					this.time = 1;
				}
			});
			// console.log("isis", !is);
			// this.times =  setInterval(() => {
			// 	console.log('this.$mp.page.route',this.$mp.page.route);
			// 	this.time = 0
			// },1000);
			// if (!is) {

			// 	uni.setStorageSync('isPlay', true);
			// } else {
			// 	console.log('????????')
			// 	// uni.setStorageSync('isPlay', true);
			// }

			bgAudioManager.onEnded(() => {
				// console.log("参数参数参数", this.list[this.audioActiveIndex]);
				// 区分课程还是导航仪   1课程
				if (this.list[this.audioActiveIndex].type == 1) {
					// 区分是否是试听  1已购买  0试听
					if (this.list[this.audioActiveIndex].user_is_buy == 1) {
						shouting_wancheng({
							id: this.list[this.audioActiveIndex].id,
						}).then((res) => {
							// console.log("ressssss收听完成", res);
						});
						this.$http
							.kechengYanxiu_end({
								kecheng_id: this.list[this.audioActiveIndex].pid,
								zhangjie_id: this.list[this.audioActiveIndex].id,
							})
							.then((res) => {});
					}
				}

				if (this.audioActiveIndex == this.list.length - 1) {
					this.audioActiveIndex = 0;
				} else {
					this.audioActiveIndex += 1;
				}
				// console.log("结束结束", this.audioActiveIndex);
				this.bofangFun(this.list[this.audioActiveIndex]);
			});
		},
		methods: {
			...mapMutations(["setPlay","setTimes","setTimeHms"]),
			...mapActions({
				activeSetBall: 'activeSetBall'
			}),


			yincangModal(){
				// this.listShow = false
				// console.log('隐藏')
			},

			setIntervalT() {
				// console.log('你要干什么')
				if (this.times) {
					clearInterval(this.times);
				}
				this.times = setInterval(() => {
					// console.log('调用?????????????')
					this.time = 0;
				}, 1000);
			},
			jieliu(fn, delay) {
				// console.log("1111111111ttttttt");
				let timer = null;
				return function() {
					let content = this;
					let args = arguments;
					if (timer) {
						clearTimeout(timer);
					}
					timer = setTimeout(() => {
						fn.apply(content, args);
					}, delay);
				};
			},
			colse() {
				// this.show = false;
				this.isColse = true;
				setTimeout(() => {
					this.isColse = false;
					this.$emit("colse");
				}, 500);
			},
			getList() {
				// console.log('ttttttttt111111111');
				bofang_list({}).then((res) => {
					console.log("播放列表", res);
					if (res.status == 200 && res.data.list && res.data.list.length) {
						this.activeSetBall(true);
					} else {
						this.activeSetBall(false);
					}
					const index = res.data.list.findIndex((item) => {
						return item.id == res.data.info.link_id;
					});
					this.audioActiveIndex = index;
					this.list = res.data.list;
					this.info = res.data.info;
					// const bgAudioManager = uni.getBackgroundAudioManager();
					// bgAudioManager.title = res.data.list[0].title;
					// bgAudioManager.singer = '';
					// bgAudioManager.coverImgUrl = res.data.list[0].fengmian_file_url;
					// bgAudioManager.src = res.data.list[0].file_url;
					this.bofangFun(res.data.list[this.audioActiveIndex]);
					// this.setPlay();
					// this.audioList = res.data.list.map((item) => {
					// 	return {
					// 		title: item.title,
					// 		fileUrl: item.file_url,
					// 		image: item.fengmian_file_url,
					// 		epname: res.data.detail.name,
					// 		singer: "",
					// 		webUrl: "/page/index/index"
					// 	}
					// })
					this.getHeight();
					// console.log("audioList", this.audioList);
				});
			},
			nextPlay() {
				if (this.audioActiveIndex < this.list.length - 1) {
					this.audioActiveIndex += 1;
					this.bofangFun(this.list[this.audioActiveIndex]);
				}
			},
			prevPlay() {
				if (this.audioActiveIndex > 0) {
					this.audioActiveIndex -= 1;
					this.bofangFun(this.list[this.audioActiveIndex]);
				}
			},
			// 播放 暂停
			onPlay(isplay) {
				if (isplay) {
					bgAudioManager.pause();
					this.isPlay = false;
				} else {
					if (
						this.list[this.audioActiveIndex] &&
						this.list[this.audioActiveIndex].user_is_buy == 0 &&
						this.currentTimes >= 30
					) {
						uni.$u.toast("行者权益不足请解锁再试");
					} else {
						bgAudioManager.play();
						this.isPlay = true;
					}
				}
			},
			bofangFun(item) {
				// console.log(
				// 	"itemmmmmm1111111111111",
				// 	item,
				// 	this.audioActiveIndex,
				// 	item.user_is_buy
				// );
				bgAudioManager.title = item.title;
				bgAudioManager.singer = "";
				bgAudioManager.coverImgUrl = item.fengmian_file_url;
				bgAudioManager.src = item.file_url;
				this.sliderDisabled = false;
				if (item.user_is_buy == 1) {
					this.isPlay = true;
				} else {
					// this.isPlay = false;
					// bgAudioManager.pause();
					this.currentTime = this.formatSeconds(
						bgAudioManager.currentTime.toFixed(0)
					);
					this.currentTimes = bgAudioManager.currentTime.toFixed(0);
					this.durations = bgAudioManager.duration;
					this.duration = this.formatSeconds(bgAudioManager.duration);
					if (this.currentTimes >= 30) {
						this.isPlay = false;
					} else {
						this.isPlay = true;
					}
					setTimeout(() => {
						uni.$u.toast("行者权益不足试听30秒");
					}, 800);
				}

				// schedule
			},
			formatSeconds(value) {
				let secondTime = parseInt(value); // 秒
				let minuteTime = 0; // 分
				let hourTime = 0; // 小时
				if (secondTime >= 60) {
					minuteTime = parseInt(secondTime / 60);
					secondTime = parseInt(secondTime % 60);
					if (minuteTime >= 60) {
						hourTime = parseInt(minuteTime / 60);
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				let result =
					"" +
					(parseInt(secondTime) < 10 ?
						"0" + parseInt(secondTime) :
						parseInt(secondTime));

				// if (minuteTime > 0) {
				result =
					"" +
					(parseInt(minuteTime) < 10 ?
						"0" + parseInt(minuteTime) :
						parseInt(minuteTime)) +
					":" +
					result;
				// }
				if (hourTime > 0) {
					result =
						"" +
						(parseInt(hourTime) < 10 ?
							"0" + parseInt(hourTime) :
							parseInt(hourTime)) +
						":" +
						result;
				}
				return result;
			},
			getHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(".play_head").fields({
						size: true,
					});
					query.exec((data) => {
						// console.log("datadatadat", data);
						setTimeout(() => {
							this.height = data[0].height;
						}, 600);
					});
				});
			},
			handItem(item, index) {
				this.audioActiveIndex = index;
				this.listShow = false;
				this.bofangFun(this.list[index]);
			},
			//点击播放列表按钮时间
			onOpenAudioList() {
				// console.log("点击列表按钮");
				if (this.listShow) {
					this.listShow = false;
				} else {
					this.listShow = true;
				}
			},
			onAudioChange(data, index) {
				// console.log('播放发生变化', data, index, this.list[index].user_is_buy);
				this.audioActiveIndex = index;
				add_log({
					type: this.info.type,
					id: this.list[index].id,
				}).then((res) => {
					// console.log("ressssss", res);
				});
				// if (this.list[index].user_is_buy == 0) {
				// 	this.isPlay = false;
				// 	this.autoplay = false;
				// } else {

				// }
			},
			sliderChange(value) {
				if (
					this.list[this.audioActiveIndex] &&
					this.list[this.audioActiveIndex].user_is_buy == 0 &&
					value.detail.value >= 30
				) {
					this.currentTime = this.formatSeconds(30);
					this.currentTimes = 30;
					bgAudioManager.seek(30);
					this.sliderDisabled = true;
				} else {
					this.currentTime = this.formatSeconds(value.detail.value.toFixed(0));
					this.currentTimes = value.detail.value.toFixed(0);
					bgAudioManager.seek(value.detail.value);
				}

				// console.log("完成一次拖动后触发的事件", value.detail.value);
			},
		},
	};
</script>

<style scoped lang="scss">
	.play_zhe_box {
		// width: 100%;
		// height: 100%;
		width: 750rpx;
		flex:1;
		// background: red;
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		// background: url("/static/images/index.png") no-repeat;
		// background-size: 100% 100%;
		// background-attachment: fixed;
		// animation: myfirst 1s;
		z-index: 11007;
		.play_zhe_box_bgImg{
			// width: 750rpx;
			flex:1;
			position: absolute;
			top: 0;
			left: 0;
		}
		.play_head {
			// width: 100%;
			width: 750rpx;
			padding: 18rpx 0 47rpx;
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			z-index: 99;

			.play_head_left {
				position: absolute;
				left: 30rpx;

				.play_head_left_img {
					width: 36rpx;
					height: 22rpx;
				}
			}

			.play_head_right {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				right: 30rpx;

				.play_head_right_img {
					width: 38rpx;
					height: 38rpx;
				}
			}

			.text {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
			}
		}

		.play_cover {
			// width: 100%;
			width: 750rpx;
			padding: 0 83rpx;
			box-sizing: border-box;
			margin-top: 80rpx;

			.play_cover_img {
				// width: 100%;
				height: 584rpx;
			}
		}

		.play_text {
			margin-top: 48rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #eeeeee;
			text-align: center;
		}

		.play_bar {
			// width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.tiao {
				width: 526rpx;
				// height: 10rpx;
				// background: rgba(235, 249, 245, 0.34);
			}

			.jindu {
				// height: 100%;
				background: #31af91;
				position: relative;

				.qiu {
					width: 20rpx;
					height: 20rpx;
					background: #31af91;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.6);
					border-radius: 50%;
					position: absolute;
					right: 0;
					top: -5rpx;
				}
			}

			.bofang_text {
				font-size: 24rpx;
				font-family: Inter, Inter;
				font-weight: 400;
				color: #31af91;
				// color: #eeeeee;
				// color:red;
			}
		}

		.play_btn {
			// width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 80rpx;

			.btn_left {
				width: 36rpx;
				height: 40rpx;
				margin-right: 96rpx;

				.btn_left_img {
					width: 36rpx;
					height: 40rpx;
				}
			}

			.btn_center {
				width: 130rpx;
				height: 130rpx;

				.btn_center_img {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.btn_right {
				width: 36rpx;
				height: 40rpx;
				margin-left: 96rpx;

				.btn_right_img {
					width: 36rpx;
					height: 40rpx;
				}
			}
		}
	}

	.play_zhe_colse {
		animation: myfirst1 0.5s;
	}

	@keyframes myfirst {
		0% {
			top: 100%;
		}

		100% {
			top: 0;
		}
	}

	@keyframes myfirst1 {
		0% {
			top: 0;
		}

		100% {
			top: 100%;
		}
	}

	.bofang_list {
		width: 200rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 28rpx;
		color: #b8becc;

		.bofang_list_img {
			width: 42rpx;
			height: 42rpx;
		}

		.bofang_list_text {
			margin-top: 10rpx;
			font-size: 20rpx;
			color: #b8becc;
		}
	}

	.zhezhao {
		// position: absolute;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 800rpx;
		// height: 100vh;
		// flex:1;
		background: rgba(0, 0, 0, 0.5);
		z-index: 11008;

		.box_list {
			width: 750rpx;
			// width: 100%;
			height: 800rpx;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 110090;
			.list_title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 32rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f2f2f2;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.list_title_left{

				}
				.list_title_right {
					width: 36rpx;
					height: 22rpx;
				}
			}

			.list_item {
				// width: 100%;
				font-size: 28rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f2f2f2;
			}

			.current {
				color: #55b877;
			}
		}
	}
	
	.play_bottom{
		width:750rpx;
		height: 500rpx;
	}

	// /deep/ .audio-slider {
	// 	margin: 0 !important;
	// }
	.audio-slider {
		margin: 0 !important;
	}
</style>